<template>
	<view class="content">
		<!-- 头部 -->
		<!-- #ifndef H5 -->
			<header-navbar class="headerNavbar"></header-navbar>
		<!-- #endif -->
		<view class="container" :style="{top:navHeaderHeight+'px'}">
			<view class="safeArea">
				<view class="backgroundBox">
					<view class="timeoutDiscount">
						<text>限时会员周开始啦!</text>
						<text>现在下单即可享受特别优惠</text>
					</view>
					<!-- 背景大图 -->
					<image class="youTeaBgPic" src="../../static/images/YouTeaBg1.jpg" mode="aspectFill"></image>
					<!-- logo -->
					<image class="youTeaLogoPic" src="../../static/images/orderLogo.png"></image>
					<!-- 会员导航栏 -->
					<view class="userBox">
						<view class="userBar">
							<view class="userImg">
								<image :src="showUserInfo.avatarUrl" mode=""></image>
								<!-- "{"nickName":"tokukenya","gender":1,"language":"zh_CN","city":"Jiangmen","province":"Guangdong","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/PtjcZyXxsLkA2dInCWfBbzxibMJicggSzxe3q1RUEDXAYLbn2ZblQtMwic7469RLhDXZrnnZricXr21HLx4JNnTesw/132"}" -->
							</view>
							<view class="userName">
								<text>{{showUserInfo.nickName}}</text>
								<view class="memberBar">会员权益</view>
							</view>
							<view class="growingBar">
								<text class="nowGrow">当前成长值 0/100</text>
								<view class="loading"></view>
							</view>
						</view>
						<view class="userList">
							<block v-for="(item,index) in userItemList" :key='index'>
								<navigator url='' hover-class="none" class="userItem">
									<view class="userItemCount">{{item.count}}</view>
									<view class="userItemTitle">{{item.title}}</view>
								</navigator>
							</block>
						</view>
					</view>
				</view>

				<!-- 我的服务 -->
				<view class="myServices">
					<view class="myServicesTitle">
						<text>我的服务</text>
					</view>
					<view class="myServicesBox">
						<!-- 每一项 -->
						<block v-for="(item,index) in myServicesList" :key='index'>
							<view class="myServicesItem">
								<navigator url='#' hover-class="none">
									<view class="imageBox">
										<image :src="item.img" mode="aspectFill"></image>
									</view>
									<text>{{item.title}}</text>
								</navigator>
							</view>
						</block>
					</view>
				</view>
				<!-- 底部小tips -->
				<view class="footerTips">
					<text>会员卡适用于YouTea和@有杯茶指定范围</text>
					<text>最终解释权由YouTea(@有杯茶)所有</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderNavbar from '../../components/HeaderNavbar.vue'
	import {navHeaderHeight} from '../../assets/js/navHeaderHeight.js';
	export default {
		name: 'me',
		data() {
			return {
				navHeaderHeight:null,
				myServicesList: [{
						title: "积分签到",
						img: "../../static/images/icon/me/signIn.png"
					},
					{
						title: "送T爱心意",
						img: "../../static/images/icon/me/like.png"
					},
					{
						title: "You茶商城",
						img: "../../static/images/icon/me/shopPag.png"
					},
					{
						title: "联系客服",
						img: "../../static/images/icon/me/kefu.png"
					},
					{
						title: "我的订单",
						img: "../../static/images/icon/me/order.png"
					},
					{
						title: "我的资料",
						img: "../../static/images/icon/me/data.png"
					},
					{
						title: "收货地址",
						img: "../../static/images/icon/me/address.png"
					},
					{
						title: "更多服务",
						img: "../../static/images/icon/me/moreService.png"
					},
				],
				userItemList: [{
						count: 3,
						title: "优惠券",
					},
					{
						count: 0,
						title: "积分商城",
					},
					{
						count: 0,
						title: "余额",
					},
					{
						count: 0,
						title: "礼品卡",
					},
				],
				showUserInfo:null,
			}
		},
		components: {
			HeaderNavbar,
		},
		methods: {

		},
		onShow() {
			// console.log(navHeaderHeight);
			this.navHeaderHeight=navHeaderHeight
			this.showUserInfo = uni.getStorageSync('userInfo')
		},
	}
</script>
<style lang="scss">
	@import '@/assets/scss/mixin.scss';
	@import '@/assets/scss/config.scss';

	.content {
		@include flex(center, center);
		flex-direction: column;
		background-color: #FFF;

		.headerNavbar {
			@include position(relative);
			z-index: 10000;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
			text-align: center;
			// margin-top: 44rpx;
		}

		.container {
			//包含所有内容的主容器
			background-color: aliceblue;
			position: relative;
			left: 0;
			.safeArea {
				width: 100%;
				height: 100%;
				margin: 0 auto 20rpx;

				//包含背景和会员盒子
				.backgroundBox {
					width: 100%;
					height: 720rpx;
					background-color: $colorE;
					position: relative;
					@include flex(center, flex-start) // 背景大图
					text-align: center;

					.timeoutDiscount {
						position: absolute;
						top: 28%;
						width: 100%;
						@include fontStyle($fontE, $colorA);
						@include flex(center, center);
						flex-wrap: wrap;

						text {
							width: 100%;
						}
					}

					.youTeaBgPic {
						width: 100%;
						height: 520rpx;
					}

					.youTeaLogoPic {
						position: absolute;
						width: 140rpx;
						height: 140rpx;
						top: 8%;
					}

					.userBox {
						background-color: #FFF;
						width: 90%;
						height: 300rpx;
						position: absolute;
						bottom: 60rpx;
						margin-bottom: 10rpx;
						box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
						@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
						@include flex(center, flex-start);
						flex-wrap: wrap;

						.userBar {
							width: 100%;
							height: 50%;
							@include flex(center, flex-start);
							flex-wrap: wrap;
							position: relative;

							.userImg {
								border: 1rpx solid #FFFFFF;
								background-color: #FFF;
								border-radius: 50%;
								@include flex(center, center);
								box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .1);
								@include position(absolute, -40rpx, 30rpx, 170rpx, 170rpx);
								image {
									width: 150rpx;
									height: 150rpx;
									border: 1rpx solid #E8E8E8;
									border-radius: 50%;
								}
							}

							.userName {
								width: 100%;
								margin-top: 10rpx;
								// margin-right: 20rpx;
								// background-color: $colorA;
								@include flex(center, center);

								text {
									display: inline-block;
									width: 75%;
									height: 60rpx;
									line-height: 60rpx;
									padding-right: 50rpx;
									text-align: right;
									font-weight: bold;
									@include fontStyle($fontD, black);

									&::after {
										content: '>';
										margin-left: 10rpx;
										@include fontStyle($fontE);
									}
								}

								.memberBar {
									// float: right;
									width: 25%;
									height: 50rpx;
									line-height: 50rpx;
									text-align: center;
									@include border-radius(20rpx, 0, 0, 20rpx);
									@include fontStyle($fontF, white);
									background-color: #FF9900;
									@include flex(center, center);
									color: white;

									&::after {
										content: '>';
										margin-left: 10rpx;
										@include fontStyle($fontE, white);
									}
								}

							}

							.growingBar {
								width: 280rpx;
								margin-top: -44rpx;
								margin-left: 70rpx;
								@include flex(flex-start, center);
								flex-wrap: wrap;

								.nowGrow {
									text-align: left;
									width: 100%;
									height: 30rpx;
									@include fontStyle($fontG);
								}

								.loading {
									width: 280rpx;
									height: 14rpx;
									border: 1rpx solid #FFF;
									border-radius: 10rpx;
									background-color: #E8E8E8;
									// margin-left: 34px;
								}
							}
						}

						.userList {
							width: 100%;
							height: 50%;
							padding: 0 5%;
							@include flex(space-evenly, flex-start);
							flex-wrap: wrap;

							.userItem {
								width: 24.99%;
								height: 100%;
								display: block;
								
								.userItemCount {
									width: 100%;
									height: 65%;
									font-weight: bold;
									@include fontStyle($fontB, black);
									@include flex(center, center);
								}

								.userItemTitle {
									width: 100%;
									height: 35%;
									// font-weight: bold;
									@include fontStyle($fontE);
									@include flex(center, flex-start);
								}


							}
						}
					}

				}


				//会员盒子

				//今日特价
				.myServices {
					background-color: #FFF;
					padding-top: 30rpx;
					width: 100%;

					.myServicesTitle {
						width: 100%;
						height: 60rpx;
						padding: 0 0 0 30rpx;
						// @include fontStyle($fontE, black);
					}

					.myServicesBox {
						width: 100%;
						height: 310rpx;
						@include flex(space-evenly, center) // flex-direction: row;
						flex-wrap: wrap;
						margin-bottom: 10rpx;

						//产品的每一项
						.myServicesItem {
							width: 24.99%;
							height: 50%;
							padding: 10rpx;
							text-align: center;
							@include fontStyle($fontF,BLACK)
							.imageBox {
								width: 100%;
								height: 100%;

								image {
									width: 50rpx;
									height: 50rpx;

								}
							}

							text {
								width: 100%;
								height: 40rpx;
							}

						}
					}
				}

				//底部提示
				.footerTips {
					margin-top: 50rpx;
					width: 100%;
					@include flex(center, center); 
					@include fontStyle($fontG);
					flex-wrap: wrap;
					text-align: center;
					text{
						width: 100%;
						height: 30rpx;
						line-height: 30rpx;
					}
				}

			}
		}
	}
</style>
